<template>
	<view class="time-card">
		<view class="main">
			<view class="card-box" v-for="(item,index) in listData" :key="index">
				<view class="card-title">{{item.timeCardName}}</view>
				<view class="card-text color-gray">卡ID：{{item.timeCardId}}</view>
				<view class="card-text">时长：{{item.hour}}小时</view>
				<view class="card-text">售价：¥{{item.price}}元</view>
				<view class="card-text color-gray" v-if="currentConfig.expType === '1'">有效期：{{item.expStartTime}} ~
					{{item.expEndTime}} </view>
				<view class="card-text color-gray" v-else>有效期：获得卡后{{item.expDay}}天 </view>
				<view class="card-btn-box">
					<view class="common-btn" @click="toTimeCardRecord(item)">使用记录</view>
					<view class="common-btn" @click="openPop('edit',item)">编辑</view>
					<view class="common-btn delete-btn" @click="deleteEvent(item)">删除</view>
				</view>
			</view>
			<view class="noMore">暂无更多</view>
		</view>
		<view class="footer-box">
			<view class="gift-card" @click="toTimeCardGiftRecord">赠送记录</view>
			<view class="add-card" @click="openPop('add')">添加时长卡</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area='false'>
			<view class="pop-box">
				<view class="pop-title">{{type==='add'?'新增时长卡':'编辑时长卡'}}</view>
				<view class="pop-content">
					<view class="pop-item">
						<view class="pop-item-title">时长卡名称：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.timeCardName" placeholder="请输入时长卡名称"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">时长：</view>
						<uni-easyinput class="pop-input" type="number" :maxlength="10" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.hour" placeholder="请输入时长卡时长"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">售价：</view>
						<uni-easyinput class="pop-input" type="number" :maxlength="10" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.price" placeholder="请输入时长卡价格"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">排序：</view>
						<uni-easyinput class="pop-input" type="number" :maxlength="10" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.timeCardSort" placeholder="数字越小越靠前"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">关联美团大众ID：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.mtId" placeholder="请输入美团大众ID"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">美团团购名称：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.mtName" placeholder="请输入美团团购名称"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">关联抖音ID：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.dyId" placeholder="请输入抖音ID"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">抖音团购名称：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.dyName" placeholder="请输入抖音团购名称"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">房间类型：</view>
						<uni-data-select v-model="currentConfig.type" :clear="false" :localdata="typeRange"
							@change="changeType"></uni-data-select>
					</view>
					<view>
						<view class="brand-title">有效期</view>
						<radio-group @change="expTypeChange">
							<view class="pop-item">
								<view class="pop-item-title">
									<radio value="1" :checked="currentConfig.expType === '1'"
										activeBackgroundColor="#ff9600" />固定时间：
								</view>
								<uni-datetime-picker v-model="rangeDate" type="daterange" @change="dateChange" />
							</view>
							<view class="pop-item">
								<view class="pop-item-title">
									<radio value="2" :checked="currentConfig.expType === '2'"
										activeBackgroundColor="#ff9600" />获得卡后：
								</view>
								<uni-easyinput class="pop-input" type="number" :maxlength="10" primaryColor="#ffd589"
									trim="all" v-model="currentConfig.expDay" placeholder="请输入天数"></uni-easyinput>天
							</view>
						</radio-group>

						<view class="pop-item" v-show="currentConfig.type && currentConfig.type !== '0'">
							<view class="pop-item-title">适用包间：</view>
							<uni-data-select v-model="roomRangeVal" :clear="false" :localdata="roomRange"
								@change="changeRoomType"></uni-data-select>
						</view>
						<view class="pop-item" v-show="roomRangeVal === '2'">
							<view class="pop-item-title"></view>
							<uni-data-checkbox multiple v-model="currentConfig.productIdList" selectedColor="#ff9600"
								selectedTextColor="#ff9600" :localdata="limitList"
								@change="changeRoom"></uni-data-checkbox>
						</view>
					</view>

					<view>
						<view class="brand-title">适用日</view>
						<view class="pop-item">
							<view class="pop-item-title"></view>
							<uni-data-checkbox multiple v-model="currentConfig.weekList" selectedColor="#ff9600"
								selectedTextColor="#ff9600" :localdata="rangeWeek"
								@change="changeWeek"></uni-data-checkbox>
						</view>
						<view class="pop-item">
							<view class="pop-item-title">适用时段：</view>
							<view class="time-box">
								<picker mode="time" value="hh:mm" @change="timeStartChange">
									<view class="picker-tip">{{currentConfig.startTime || '选择开始时间'}}</view>
								</picker>
								<text style="margin: 0 20rpx;"> 至 </text>
								<picker mode="time" value="hh:mm" @change="timeEndChange">
									<view class="picker-tip">{{currentConfig.endTime || '选择结束时间'}}</view>
								</picker>
							</view>
						</view>
					</view>

				</view>
				<view class="pop-btn-box">
					<view class="cancel-btn" @click="closePop">取消</view>
					<view class="submit-btn" @click="submitEvent">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productionModel: [],
				rangeDate: [],
				listData: [],
				shopId: '',
				rangeWeek: [{
					"value": 'mon',
					"text": "周一"
				}, {
					"value": 'tue',
					"text": "周二"
				}, {
					"value": 'wed',
					"text": "周三"
				}, {
					"value": 'thu',
					"text": "周四"
				}, {
					"value": 'fri',
					"text": "周五"
				}, {
					"value": 'sat',
					"text": "周六"
				}, {
					"value": 'sun',
					"text": "周日"
				}],
				limitList: [],
				roomList: [],
				tableList: [],
				ktvList:[],
				weekObj: {
					sun: '周日',
					mon: '周一',
					tue: '周二',
					wed: '周三',
					thu: '周四',
					fri: '周五',
					sat: '周六',
				},
				currentConfig: {
					timeCardName: '',
					hour: '',
					price: '',
					timeCardSort: '',
					mtId: '',
					mtName: '',
					dyId: '',
					dyName: '',
					type: '',
					expType: '',
					expStartTime: '',
					expEndTime: '',
					expDay: '',
					productIdList: [],
					weekList: [],
					startTime: '',
					endTime: ''
				},
				type: '',
				typeRange: [{
					value: '0',
					text: '全部'
				}],
				roomRangeVal: '1',
				roomRange: [],
				roomRangeType1: [{
					value: '1',
					text: '所有包间'
				}, {
					value: '2',
					text: '指定包间'
				}],
				roomRangeType2: [{
					value: '1',
					text: '所有球桌'
				}, {
					value: '2',
					text: '指定球桌'
				}]
			};
		},
		methods: {
			// 选择房间类型
			changeType(e) {
				this.currentConfig.type = e
				this.roomRangeVal = '1'
				if (this.currentConfig.type === '1') {
					this.roomRange = [...this.roomRangeType1]
					this.limitList = [...this.roomList]
				} else if (this.currentConfig.type === '2') {
					this.roomRange = [...this.roomRangeType2]
					this.limitList = [...this.tableList]
				}else if(this.currentConfig.type === '3'){
					this.roomRange = [...this.roomRangeType1]
					this.limitList = [...this.ktvList]
				}
			},
			// 选择适用包间类型
			changeRoomType(e) {
				this.roomRangeVal = e
				this.currentConfig.productIdList = []
			},
			// 选择有效期类型
			expTypeChange(e) {
				this.currentConfig.expType = e.detail.value
			},
			// 选择适用包间
			changeRoom(e) {
				this.currentConfig.productIdList = e.detail.value
			},
			// 选择日期
			dateChange(e) {
				this.rangeDate = e
				this.currentConfig.expStartTime = this.rangeDate[0]
				this.currentConfig.expEndTime = this.rangeDate[1]
			},
			// 选择周日期
			changeWeek(e) {
				this.currentConfig.weekList = e.detail.value
			},
			// 时间选择器
			timeStartChange(e) {
				this.currentConfig.startTime = e.detail.value
			},
			timeEndChange(e) {
				this.currentConfig.endTime = e.detail.value
			},
			// 重置数据
			resetData() {
				this.currentConfig = {
					timeCardName: '',
					hour: '',
					price: '',
					timeCardSort: '',
					mtId: '',
					mtName: '',
					dyId: '',
					dyName: '',
					type: '',
					expType: '',
					expStartTime: '',
					expEndTime: '',
					expDay: '',
					productIdList: [],
					weekList: [],
					startTime: '',
					endTime: ''
				}
				this.roomRange = [...this.roomRangeType1]
				this.rangeDate = []
				this.limitList = []
			},
			// 使用记录
			toTimeCardRecord(item) {
				uni.navigateTo({
					url: `/pages/time-card-record/time-card-record?timeCardId=${item.timeCardId}&shopId=${this.shopId}&timeCardName=${item.timeCardName}`
				})
			},
			// 时长卡赠送记录
			toTimeCardGiftRecord() {
				uni.navigateTo({
					url: `/pages/time-card-gift-record/time-card-gift-record?shopId=${this.shopId}`
				})
			},
			// 打开弹窗
			openPop(type, item) {
				this.type = type
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if (type === 'edit') {
					// this.currentConfig = JSON.parse(JSON.stringify(item));
					this.getCardDetail(item)
				} else {
					this.resetData()
					this.$refs.popup.open('center')
				}
			},
			closePop() {
				this.$refs.popup.close()
			},
			// 获取时间卡详细信息
			getCardDetail(item) {
				this.$request({
					method: 'get',
					url: `/applet/store/timeCard/${item.timeCardId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						this.currentConfig = res.data
						if (this.currentConfig.type === '1') {
							this.roomRange = [...this.roomRangeType1]
							this.limitList = [...this.roomList]
						} else if (this.currentConfig.type === '2') {
							this.roomRange = [...this.roomRangeType2]
							this.limitList = [...this.tableList]
						}else if(this.currentConfig.type === '3'){
							this.roomRange = [...this.roomRangeType1]
							this.limitList = [...this.ktvList]
						}
						if (this.currentConfig?.productIdList?.length) {
							this.roomRangeVal = '2'
						}
						this.$refs.popup.open('center')
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 保存时长卡设置
			submitEvent() {
				const data = this.currentConfig
				data.shopId = this.shopId
				let method = ''
				if (this.type === 'edit') {
					method = 'put'
				} else {
					method = 'post'
				}
				this.$request({
					method: method,
					url: '/applet/store/timeCard',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						this.getTimeCardList()
						this.closePop()
						this.resetData()
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取时长卡列表
			getTimeCardList() {
				const data = {
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: '/applet/store/timeCard/list',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.listData = res.rows || []
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 删除时长卡
			deleteEvent(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除该时长卡？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'DELETE',
								url: `/applet/store/timeCard/${item.timeCardId}`,
								loading: false,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									this.getTimeCardList()
									uni.showToast({
										title: '删除成功',
										duration: 2000,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: res.msg,
										duration: 2000,
										icon: 'none'
									})
								}
							}).catch(err => {
								console.error('接口异常：', err)
							})
						}
					}
				})
			},
			// 获取包间和球桌列表数据
			getRoomData() {
				const data = {
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: `/applet/store/product/manageList`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					res.rows.forEach((item) => {
						const obj = {
							value: item.productId,
							text: item.productName
						}
						if (item.productType === '1') {
							// 棋牌
							this.roomList.push(obj)
						} else if (item.productType === '2') {
							// 桌球
							this.tableList.push(obj)
						}else if(item.productType === '3'){
							// 影音室
							this.ktvList.push(obj)
						}
					})
				})
			},
			// 获取产品类型
			getProductionModel() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/modelList`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.productionModel = res.data || []

					this.productionModel.forEach((item) => {
						let obj = {
							value: item.modelType,
							text: item.modelName
						}
						this.typeRange.push(obj)
					})

				}).catch(err => {
					console.log('查询异常：', err)
				})
			},
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.getTimeCardList()
			this.getRoomData()
			this.getProductionModel()
		}
	}
</script>

<style lang="scss" scoped>
	.time-card {
		.scroll-box {
			height: calc(100vh - 44px);
			padding-bottom: 140rpx;
			box-sizing: border-box;
		}

		.brand-title {
			position: relative;
			font-weight: 600;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
		}

		.brand-title::before {
			content: '';
			width: 8rpx;
			height: 30rpx;
			position: absolute;
			left: 10rpx;
			top: 6rpx;
			background: #ff9600;
		}

		.footer-box {
			position: fixed;
			width: 100%;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFF;
			bottom: 0;
			box-sizing: border-box;

			.gift-card {
				flex: 1;
				margin-right: 20rpx;
				background: #169bd5;
				color: #FFF;
				padding: 20rpx 40rpx;
				border-radius: 10rpx;
				text-align: center;
			}

			.add-card {
				flex: 1;
				background: #ff9600;
				color: #FFF;
				padding: 20rpx 40rpx;
				border-radius: 10rpx;
				text-align: center;
			}
		}

		.main {
			padding: 20rpx;
		}

		.card-box {
			background: #FFF;
			border: 1px solid #EEE;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
		}

		.card-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #ff9600;
		}

		.card-text {
			color: #333;
			font-size: 26rpx;
			margin-top: 10rpx;
		}

		.color-gray {
			color: gray;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

		.card-btn-box {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;

			.common-btn {
				border: 1px solid #333;
				color: #333;
				padding: 4rpx 20rpx;
				font-size: 26rpx;
				margin-left: 40rpx;
				border-radius: 10rpx;
			}

			.delete-btn {
				border: none;
				color: #FFF;
				background: #d9001b;
			}
		}

		.pop-box {
			background: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			width: 730rpx;

			.pop-content {
				max-height: 800rpx;
				overflow-y: auto;
			}

			.pop-title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.pop-item-title {
				width: 228rpx;
				text-align: right;
			}

			.pop-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 30rpx;
			}

			.pop-unit {
				margin-left: 10rpx;
			}

			.pop-btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 60rpx;

				.cancel-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1px solid #CCC;
				}

				.submit-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #FFF;
					background: #ff9600;
				}
			}
		}

		.time-box {
			display: flex;
			align-items: center;

			.picker-tip {
				color: #999;
			}
		}
	}
</style>